<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title><%=data.name%></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<style>
			html,body,* { margin: 0;padding: 0;border: none; font-family: -apple-system,"Helvetica Neue","Arial","PingFang SC","Hiragino Sans GB","STHeiti","Microsoft YaHei","Microsoft JhengHei","Source Han Sans SC",sans-serif;}
			body { 
			  max-width: 640px;
			  margin: auto;
			}
			.page {
			  padding: 0 0 4rem 0;
			}
			.courseImg img{
				display: block;
				width: 100%;
			}
			.headWrap{
				text-align: center;
				height: 5rem;
				margin: 1rem 0;
			}
			.headImg{
				display: inline-block;
				width: 5rem;
				height: 5rem;
				background-color: #e5007f;
				border-radius: 5rem;
				margin: 0;
				overflow: hidden;
			}
			.headImg img{
				width: 100%;
				height: 100%;
				border-radius: 5rem;
			}
			.content{
				padding: 1rem;
			}
			.content img{
				display: block;
				width: 100%!important;
			}
			.item{
				font-size: 14px;
				color: #333;
				line-height: normal;	
				padding: 0.3rem 0;
				position: relative;
				z-index: 10;
				padding-left: 4.5rem;
				min-height: 1.2rem;
			}
			.item b{
				width: 5rem;
				position: absolute;
				left: 0;
				top: 0.3rem;
				z-index: 10;
			}
			.download-button {
			  position: fixed;
			  z-index: 20;
			  bottom: 0;
			  left: 0;
			  text-align: center;
			  width: 100%;
			  height: 4rem;
			  background-color: #f7f5f5;
			  box-shadow: -1px 0 5px #f0ebeb;
			}
			.download-button a {
			  background-color: #e5007f;
			  color: #fff;
			  text-decoration: none;
			  text-align: center;
			  vertical-align: middle;
			  line-height: 3rem;
			  font-size: 1.2rem;
			  border-radius: 6px;
			  height: 3rem;
			  width: 14rem;
			  margin: 0.5rem auto 0 auto;
			  display: inline-block;
			}
			
			.tips {
			  display: none; 
			}
			.tips .mask {
			  position: fixed;
			  z-index: 1000;
			  top: 0;
			  right: 0;
			  left: 0;
			  bottom: 0;
			  background-color: rgba(0,0,0,.6);
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  color: #fff;
			   padding: 1rem;
			   font-size: 1rem;
			   line-height: 1.8rem;
			}
			.tips .text {
			  position: fixed;
			  top: 1rem;
			  right: 1.8rem;
			  width: 11.8rem;
			  height: 4.1rem;
			  background-size: 100%;
			  background-repeat: no-repeat;
			  background-image: url('/images/tips.png');
			  z-index: 1001;
			}
			#tishibox{
				position: fixed;
				z-index: 1000;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;
				color: #333;
				font-size: 1rem;
				line-height: 1.8rem;
				display: none;
			}
			.tsMain{
				width: 80%;
				background-color: #FFFFFF;
				border-radius: 5px;
				padding: 1rem;
			}
			.tsMain p{
				width: 80%;
				line-height: 26px;
				margin:0.5rem auto;
				text-align: center;
			}
			.tsBtn{
				background-color: #ff812c;
				color: #fff;
				text-decoration: none;
				text-align: center;
				vertical-align: middle;
				line-height: 3rem;
				font-size: 1rem;
				border-radius: 6px;
				height: 3rem;
				width: 80%;
				margin:1.5rem auto;
			}
			.tsBtn2{
				background-color: #ff1332;
			}
			.maskMain{
				background-color: rgba(47,85,150,0.5);
				text-align: center;
				padding: 0.8rem 0.4rem;
				border-radius: 5px;
				color: #ffd225;
			}
			.maskMain img{
				width: 3.8rem;
				display: block;
				margin: 0 auto;
				margin-bottom: 0.7rem;
				display: block;
			}
			.xxnrong{
				font-size: 14px!important;
				line-height: 1.5rem;
			}
			.xxnrong img{
				display: block;
				width: 100%!important;
			}
		</style>
	</head>
	<body>
		<div class="page">
			<div class="courseImg"><img src="<%=data.imagesUrl%>"></div>
			<div class="content">
				<h2 style="font-size: 16px; text-align: center; padding: 1rem 0;"><%=data.fullName%></h2>
				<div class="xxnrong"><%-data.details%></div>
			</div>
			
			<div class="download-button">
			  <a href="javascript:;" id="download_button">立即观看</a>
			</div>
			
		  </div>
		
		  <div class="tips" id="tips">
				<span class="mask">
					<span class="maskMain">
						<img src="/images/tishi.png?v=1.0">
						为保证您无约束参与，保障您无卡顿观看，请点击右上角“…”，在弹出菜单中选择“在浏览器打开”，然后继续
					</span>
				</span>
				<span class="text"></span>
		  </div>
		  
		  <div id="tishibox">
			  <div class="tsMain">
				  <p>只有下载安装<b>“EJ在线APP”</b>才能正常观看哦，请确保您的手机上已经安装了<b>“EJ在线APP”</b></p>
				  <div class="tsBtn tsBtn2" id="xiazai">未安装，立即下载</div>
				  <div class="tsBtn" id="guankan">已安装，立即观看</div>
			  </div>
		  </div>
	</body>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
  var ua = navigator.userAgent.toLowerCase()
    ,Android = /(android|adr)/.test(ua)
    ,iOS = /ip(hone|od|ad)/i.test(ua)
    ,iPhone = /iphone/i.test(ua)
    ,WindowsPhone = /(windows phone)/.test(ua)
    ,Wechat = /micromessenger/.test(ua)
    ,QQ = /mqqbrowser/.test(ua)
	
	if (Wechat && !iOS) { //如果是微信
	  $('#download_button').click(function(){
	  	$('#tips').css({ display: 'block'}).click(function(){
			$(this).css({ display: 'none'})
		})
	  })
	}else{
		$("#tishibox").css({'display':'flex'})
		$('#download_button').css({ display: 'none'})
		$('#xiazai').click(function(){
			var downloadUrl = <%- JSON.stringify(androidUrl) %>
			if (iOS || iPhone) {//ios
				alert("苹果版app正在开发中，敬请期待！")
			}else{
				window.location.href = downloadUrl;
			}	
		})
		$('#guankan').click(function(){
			var id = <%- JSON.stringify(id) %>
			var type = <%- JSON.stringify(type) %>
			var downloadUrl = <%- JSON.stringify(androidUrl) %>
			var config = {
				/*scheme:必须*/
				scheme_Adr: 'ejwlcom://ejonlinetest?id='+id+'&type='+type,
				download_url: downloadUrl,
				timeout: 1200
			};
			var ifr = document.createElement('iframe');
			ifr.src = config.scheme_Adr;
			ifr.style.display = 'none';
			document.body.appendChild(ifr);
		})
	}
</script>
</html>

